<!DOCTYPE html>
<html lang="zh">
<!-- 
结果统计页面 - 主界面
功能：用于按分类汇总和可视化展示归档热像素检测结果
主要模块：
1. 导航栏 - 提供首页、历史记录、检测结果、结果统计链接
2. 筛选器 - 提供分类选择功能（待扩展）
3. 可视化展示 - 热像素统计图表（待实现）
-->
<head>
    <meta charset="UTF-8">
    <title>结果统计</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <style>
        /* 左侧筛选栏 */
        .sidebar {
            width: 250px;
            min-width: 250px;
            background-color: #f8f9fa;
            padding: 20px;
            border-right: 1px solid #ccc;
        }

        .sidebar h3 {
            margin-top: 0;
        }

        .sidebar label {
            display: block;
            margin-top: 15px;
            font-weight: bold;
        }

        .sidebar select,
        .sidebar input[type="number"] {
            width: 100%;
            padding: 6px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 右侧展示区 */
        .content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
        }

        .content h1 {
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .chart-container {
            margin-top: 20px;
        }

        canvas {
            width: 100% !important;
            height: 400px !important;
        }
    </style>
</head>
<body class="page-transition">
    <!-- 顶部导航栏 -->
    <div class="nav-links">
        <a href="/" class="nav-link"><i class="fas fa-home"></i> 首页</a>
        <a href="/results" class="nav-link"><i class="fas fa-list"></i> 检测结果</a>
        <a href="/history" class="nav-link"><i class="fas fa-history"></i> 历史记录</a>
        <a href="/stats" class="nav-link active"><i class="fas fa-chart-bar"></i> 结果统计</a>
    </div>

    <!-- 页面主体布局 -->
    <div class="layout">
        <!-- 左侧筛选栏 -->
        <div class="sidebar">
            <h3>筛选条件</h3>
            <label for="categorySelect">选择分类：</label>
            <select id="categorySelect">
                <option value="FIELD_ID">FIELD_ID</option>
                <option value="OBJECT">OBJECT</option>
                <option value="DATE-OBS">DATE-OBS</option>
            </select>

            <label for="valueSelect">选择值：</label>
            <select id="valueSelect"></select>

            <h3 style="margin-top: 30px;">匹配参数</h3>
            <label for="tolerance">容差 (Tolerance)</label>
            <input type="number" id="tolerance" value="1" min="0">

            <label for="threshold">阈值 (Threshold)</label>
            <input type="number" id="threshold" value="0.6" step="0.1" min="0" max="1">
        </div>

        <!-- 右侧展示区 -->
        <div class="content">
            <h1><i class="fas fa-chart-bar"></i> 结果统计</h1>
            <div class="chart-container">
                <canvas id="resultChart"></canvas>
            </div>
        </div>
    </div>

    <!-- JS逻辑 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const categorySelect = document.getElementById('categorySelect');
        const valueSelect = document.getElementById('valueSelect');
        const chartCtx = document.getElementById('resultChart').getContext('2d');
        const toleranceInput = document.getElementById('tolerance');
        const thresholdInput = document.getElementById('threshold');
        let chartInstance = null;

        async function fetchMetadata() {
            const res = await fetch('/api/archive-metadata');
            return await res.json();
        }

        async function updateValueSelect(category) {
            const metadata = await fetchMetadata();
            const values = [...new Set(metadata.map(item => item[category]))];
            valueSelect.innerHTML = values.map(v => `<option value="${v}">${v}</option>`).join('');
            if (values.length > 0) updateChart(category, values[0]);
        }

        async function updateChart(category, value) {
            const res = await fetch(`/api/stats-match?category=${category}&value=${value}`);
            const data = await res.json();
            const tolerance = parseInt(toleranceInput.value);
            const threshold = parseFloat(thresholdInput.value);

            if (chartInstance) chartInstance.destroy();
            chartInstance = new Chart(chartCtx, {
                type: 'bar',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: `热像素数量 (T=${tolerance}, th=${threshold})`,
                        data: data.counts,
                        backgroundColor: '#3498db'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: true }
                    }
                }
            });
        }

        categorySelect.addEventListener('change', () => updateValueSelect(categorySelect.value));
        valueSelect.addEventListener('change', () => updateChart(categorySelect.value, valueSelect.value));
        toleranceInput.addEventListener('input', () => updateChart(categorySelect.value, valueSelect.value));
        thresholdInput.addEventListener('input', () => updateChart(categorySelect.value, valueSelect.value));

        updateValueSelect(categorySelect.value);
    </script>
</body>
</html>
